<template>
  <!-- 用户头像&姓名&点击头像访问豆豆 -->
  <div :class="layout === 'vertical' ? 'hu-nameImg--vertical' : 'hu-name-img'">
    <van-image
      class="hu-name-img--image"
      :round="round"
      :width="imageWidth"
      :height="imageWidth"
      :src="portraitURL"
    >
      <template #error>
        <svg-icon :iconClass="defaultSvg" style="height: 100%; width: 100%" />
      </template>
    </van-image>
    <span
      class="hu-nameImg-text"
      :style="{
        width:
          layout === 'vertical'
            ? `${imageWidth}px`
            : `calc(100% - 12px - ${imageWidth}px)`,
      }"
    >
      {{ name }}
      <slot name="chat">
        <van-icon name="chat-o" v-if="isChat" style="font-size: 18px" />
      </slot>
    </span>
  </div>
</template>

<script>
export default {
  name: "HuNameImg",
  components: {},
  props: {
    // 默认头像
    defaultImg: {
      type: String,
      default: ""
    },
    // 默认svg
    defaultSvg: {
      type: String,
      default: "defaultUser"
    },
    // 显示名称
    name: {
      type: String,
      default: "名称"
    },
    // 是否可以点击跳转到豆豆进行通信
    isChat: {
      type: Boolean,
      default: false
    },

    // 头像
    portraitURL: {
      type: String,
      default: ""
    },
    // 头像形状是否为圆形
    round: {
      type: Boolean,
      default: false
    },
    // 用来进行密信聊天的用户id
    id: {
      type: String,
      default: ""
    },
    // 图片宽度
    imageWidth: {
      type: String,
      default: "36"
    },
    // 布局，默认水平布局horizontal，可填垂直布局：vertical
    layout: {
      type: String,
      default: "horizontal"
    }
  },
  data() {
    return {};
  },
  methods: {
    // 点击进行对话
    chat() {
      // if (this.isChat) {
      //   Dialog.confirm({
      //     title: "提示",
      //     message: "即将前往密信聊天，是否继续？",
      //   })
      //     .then(() => {
      //       openChat(this.id);
      //       // on confirm
      //     })
      //     .catch(() => {
      //       // on cancel
      //     });
      // }
    }
  }
};
</script>

<style lang="scss" scope>
.hu-name-img {
  display: flex;
  align-items: center;
  vertical-align: middle;
  font-size: 14px;
  color: #2b2b2b;
  .van-image {
    margin-right: 12px;
  }
}
.hu-name-img--image {
  .van-image__error {
    background-color: transparent;
  }
}
.hu-nameImg-text {
  line-height: 20px;
  height: 20px;
}
.hu-nameImg--vertical {
  flex: 1;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  .hu-nameImg-text {
    display: inline-block;
    text-align: center;
    margin-top: 2px;
    font-size: 11px;
    color: #5f5f5f;
    overflow: hidden; //溢出隐藏
    white-space: nowrap; //禁止换行
    text-overflow: ellipsis; //...
  }
}
</style>
